<template>
  <div class="body">
    <div class="mb">
      <div class="content">
        <div class="btn-content">
          <button class="btn" @click="send">發佈</button>
        </div>
        <div class="text-content">
          <textarea class="textarea" v-model="content" name="" id="" cols="30" rows="10" placeholder="分享新動態...."></textarea>
        </div>
        <div class="camera-content">
          <div>
            <input type="file" class="upload" @change="upload">
            <img src="../style/img/camera.png" alt="">
            <br>
            <span>照片/視頻</span>
          </div>
        </div>
        <div class="history-content">
          <span>歷史動態 > </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SendState',
  data () {
    return {
      content: ''
    }
  },
  methods: {
    send () {

    },
    upload () {

    }
  }
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 800px;
  background: rgba(247, 202, 201, 0.36);
}
.mb {
  width: 100%;
  height: inherit;
  background: rgba(255, 255, 255, 0.5);
}
.content {
  background: #fff;
  width: 100%;
  min-height: 250px;
  height: auto;
}
.btn-content {
  width: 100%;
  height: 35px;
  padding: 4px;
  text-align: end;
}
.btn {
  background: rgba(241, 96, 111, 1);
  color: #fff;
  border: none;
  padding: 5px;
  width: 80px;
  margin-right: 20px;
  margin-top: 10px;
}
.text-content {
  margin-top: 20px;
  width: 100%;
}
.textarea {
  width: 100%;
  border: none;
  padding: 5px;
}
.camera-content {
  width: 100px;
  height: 100px;
  text-align: center;
  position: relative;
  left: 12px;
  bottom:12px;
  background: rgba(230, 236, 240, 0.66);
  color: rgba(0, 0, 0, 0.39);
  font-size: 10px;
}
.camera-content img {
  width: 42px;
  height: 42px;
}
.history-content {
  float: right;
  position: relative;
  bottom: 25px;
  right: 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
}
.upload {
  position: relative;
  z-index: 999;
  top: 40px;
  left: 12px;
  opacity: 0;
}
</style>
